<!--Three line list with avatar -->
<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
              <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
              <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
              <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
    </li>
</ul>

<!--Three line list with avatar and icon -->
<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
                <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
        <i class="material-icons media-right">check_box</i>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
              <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
        <i class="material-icons media-right">check_box_outline_blank</i>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
              <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>	
        </div>
        <i class="material-icons media-right">check_box_outline_blank</i>
    </li>
</ul>